<template>
  <view class="performance">
    <view class="performance_item">
      <view class="performance_item_title">
        <view class="performance_item_title_title">历史业绩</view>
        <view @click="timeShow = true" class="performance_item_title_subtitle">{{today_performance}}</view>
        <u-icon name="arrow-right" color="#999999" size="20"></u-icon>
      </view>
      <view class="performance_item_content">
        <view class="performance_item_content_list" @click="goToOrder(2)">
          <view class="performance_item_content_list_num">{{TodayPerformance.order_count}}</view>
          <view class="performance_item_content_list_text">新增购买</view>
        </view>
        <view class="performance_item_content_list" @click="goToOrder(3)">
          <view class="performance_item_content_list_num">{{TodayPerformance.verification_count}}</view>
          <view class="performance_item_content_list_text">待上传笔记</view>
        </view>
        <view class="performance_item_content_list" @click="goToNote()">
          <view class="performance_item_content_list_num">{{TodayPerformance.new_note_count}}</view>
          <view class="performance_item_content_list_text">新增笔记</view>
        </view>
        <!--<view class="performance_item_content_list">
          <view class="performance_item_content_list_num" style="font-size: 24rpx">￥<text style="color:#FF4E0D;font-size: 32rpx;font-weight: bold">1000</text></view>
          <view class="performance_item_content_list_text">新增金额</view>
        </view>-->

      </view>
    </view>
    <!--日期选择-->
    <u-calendar v-model="timeShow" :mode="mode" btn-type="warning"  active-bg-color="#FF7900" @change="timeShowFun"></u-calendar>
  </view>
</template>

<script>
export default {
  name: "performance",
  props: {
    TodayPerformance: {
      type: Object,
      default: '0'
    },
    shop_id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 	今天日期
      today_performance: '',
      timeShow: false, //日期弹窗
      mode: 'date', //日期选择模式
    }
  },
  mounted() {
    // 获取当前日期的年、月、日
    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
    this.today_performance = year + '-' + month + '-' + day
    console.log('今日日期：' + this.today_performance )

  },
  methods: {
    // 跳转订单列表
    goToOrder(type){
      console.log('店铺ID=', this.shop_id)
      uni.navigateTo({
        url: '/subPackagePurse/order-list/order-list?types=' + type + '&shop_id=' + this.shop_id
      })
    },
    // 新增笔记跳转到笔记列表页面
    goToNote(){
      uni.navigateTo({
        url: '/subPackagePurse/note-list/note-list'
      })
    },
    //日期范围弹窗
    timeShowFun(e){
      let that = this
      console.log('日期选择：', e)
      that.pageSize = 1
      that.today_performance = e.result
      this.$emit('changeKPITime', e.result)
    },
  }
}
</script>
<style scoped lang="scss">
  .performance{
    padding: 30rpx;
    .performance_item{
      padding: 20rpx;
      background: #FFFFFF;
      border-radius: 30rpx;
      .performance_item_title{
        padding: 30rpx 20rpx;
        position: relative;
        display: flex;
        align-items: center;
        .performance_item_title_title{
          font-size: 30rpx;
          color: #3D3D3D;
          font-weight: bold;
          margin-right: 20rpx;
        }
        .performance_item_title_subtitle{
          font-size: 26rpx;
          color: #999999;
        }
      }
      .performance_item_content{
        padding: 10rpx 0 20rpx;
        display: flex;
        justify-content: space-between;
        .performance_item_content_list{
          width: 25%;
          text-align: center;
          .performance_item_content_list_num{
            padding: 20rpx 0;
            font-size: 32rpx;
            color: #3D3D3D;
            font-weight: bold;

          }
          .performance_item_content_list_text{
            font-size: 26rpx;
            color: #888888;
          }
        }
      }
    }
  }
</style>